<template>
    <div class="step-content" v-show="stepShow">
        <h4 v-if="!isSetp">字段映射</h4>
        <Tab-Pro type="card">
            <template slot="header" v-if="data.item" slot-scope="data">
                <div>
                    {{data.item.label}}
                    <span class="tab-drop-box" @click.stop="headerDrop(data.item.label,$event)">

                        <Button type="ghost" icon="navicon-round header-icon" size="small"></Button>
                        <transition name="slide-fade">
                            <ul class="tab-drop" :ref="drapName(data.item.label)" v-show="sheetDropShow[data.item.label]">
                                <li class="text-center add-item">
                                    表头设置
                                </li>
                                <li v-for="(name,index) in sheetData[data.item.label]" :key="name">
                                    <input type="text" :value="name" @change="headerNameChange({table:data.item.label,index,e:$event})" :placeholder="headerPlaceholder(name)" v-focus="index===sheetData[data.item.label].length-1 && !name">
                                    <div class="pull-right">
                                        <Button @click="headerSerialUp({table:data.item.label,index})" icon="arrow-up-b" type="ghost" size="small"></Button>
                                        <Button @click="headerSerialDown({table:data.item.label,index})" icon="arrow-down-b" type="ghost" size="small"></Button>
                                    </div>
                                </li>
                                <li class="text-center add-item" @click="addSheetHeader(data.item.label)">
                                    <Icon type="plus"></Icon>
                                    <span>新增表头选项</span>
                                </li>
                            </ul>
                        </transition>
                    </span>
                </div>
            </template>
            <Tab-pane v-for="(sheet,i) in sheetData" :key="i" :label="i">
                <div>
                    <Row :gutter="16">
                        <Col span="6" v-if="!data.enable_create">
                        <Select-panel title="选择实体" :value="mappingEntity(i)" :initIndex="mappingEntityIndex(i)" :data="entityData" @selectChange="updateMappingIndex({sheet:i,index:$event})" @rowUp="addEntity(i,$event)" @rowDown="removeEntity(i,$event)">
                            <template slot="option" slot-scope="data">
                                {{data.item.TABLE_NAME}}
                            </template>
                        </Select-panel>
                        </Col>

                        <Col :span="data.enable_create?24:18">
                        <Row :gutter="8" v-if="currentEntity(i) && !data.enable_create">
                            <Col span="7">字段信息</Col>
                            <Col span="6">数据范围</Col>
                            <Col span="5">字段设置</Col>
                            <Col span="6">映射列</Col>
                            <div class="mapping-item" v-for="(item,j) in currentEntity(i)" :key="j">
                                <Col span="7"> {{item.field_name}}
                                <span class="mapping-type-text">{{item.type}}</span>
                                </Col>
                                <Col span="6">
                                <RadioDataGroup v-model="item.scope" name="scope" :data="statusModel.scope"></RadioDataGroup>
                                </Col>
                                <Col span="5">
                                <Checkbox v-model="item.required"> 必填</Checkbox>
                                <Checkbox v-model="item.convert"> 数据处理</Checkbox>
                                </Col>
                                <Col span="6">
                                <SelectControl v-model="item.name" :string="true" :data="sheet" placeholder="请选择文件表头"></SelectControl>
                                </Col>
                                <template v-if="item.convert">
                                    <Col span="2" class="ruler-block">
                                    </Col>
                                    <Col span="10" class="text-right">
                                    <Checkbox v-model="item.enable_trim"> 去除空格</Checkbox>
                                    <RadioDataGroup name="convert_type" v-model="item.convert_type" :data="statusModel.convert_type"></RadioDataGroup>
                                    </Col>
                                    <Col span="12">
                                    <Tooltip placement="bottom" :content="convertRuleText(item.convert_type)">
                                        <Input v-model="item.convert_value"></Input>
                                    </Tooltip>
                                    </Col>
                                </template>
                            </div>
                        </Row>

                         <Row :gutter="8" v-if="currentEntity(i) && data.enable_create">
                            <Col span="3">名称</Col>
                            <Col span="2">编码</Col>
                            <Col span="3">类型</Col>
                            <Col span="5">数据范围</Col>
                            <Col span="5">字段设置</Col>
                            <Col span="6">映射列</Col>
                            <div class="mapping-item" v-for="(item,j) in currentEntity(i)" :key="j">
                                <Col span="3"> 
                                    <Input v-model="item.field_name"></Input>
                                </Col>
                                <Col span="2">
                                    <Input v-model="item.field_code"></Input>
                                </Col>
                                <Col span="3">
                                    <SelectControl v-model="item.type" :string="true" :data="baseType"></SelectControl>
                                </Col>
                                <Col span="5">
                                <RadioDataGroup v-model="item.scope" name="scope" :data="statusModel.scope"></RadioDataGroup>
                                </Col>
                                <Col span="5">
                                <Checkbox v-model="item.required"> 必填</Checkbox>
                                <Checkbox v-model="item.convert"> 数据处理</Checkbox>
                                </Col>
                                <Col span="6">
                                <SelectControl v-model="item.name" :string="true" :data="sheet" placeholder="请选择文件表头"></SelectControl>
                                </Col>
                                <template v-if="item.convert">
                                    <Col span="2" class="ruler-block">
                                    </Col>
                                    <Col span="10" class="text-right">
                                    <Checkbox v-model="item.enable_trim"> 去除空格</Checkbox>
                                    <RadioDataGroup name="convert_type" v-model="item.convert_type" :data="statusModel.convert_type"></RadioDataGroup>
                                    </Col>
                                    <Col span="12">
                                    <Tooltip placement="bottom" :content="convertRuleText(item.convert_type)">
                                        <Input v-model="item.convert_value"></Input>
                                    </Tooltip>
                                    </Col>
                                </template>
                            </div>
                        </Row>
                        </Col>

                    </Row>
                </div>
            </Tab-pane>
        </Tab-Pro>
    </div>
</template>

<script>
import Step from './step'
import SelectControl from '@/element/select'
import RadioDataGroup from '@/element/radioGroup'
import SelectPanel from '@/components/upDownList'
import statusModel from '../statusModel'
import TabPro from '@/element/tabsPro'
import Field from 'field'

export default {
    extends: Step,
    props: {
    },
    data() {
        return {
            baseType: Field.baseType,
            statusModel,
            convertRule: {
                1: '日期规则',
                3: '值对应规则',
                5: '表达式规则'
            },
            sheetDropShow: {}
        }
    },
    created() {

    },
    methods: {
        addSheetHeader(name) {
            this.sheetData[name].push('');
        },
        headerPlaceholder(head) {
            if (!head || head === ' ' || !head.length) {
                return '请填写表头名称'
            } else {
                return false
            }
        },
        headerDrop(name, event) {
            var close = (e) => {
                if (!this.$el || !this.$refs[this.drapName(name)].contains(e.target) && e.target !== event.target) {
                    this.headerDropClose(name)
                    document.removeEventListener('click', close)
                }
            }
            if (!this.sheetDropShow[name]) {
                this.$set(this.sheetDropShow, name, true)
                this.$nextTick(() => {
                    document.addEventListener('click', close)
                })
            }
        },
        drapName(name) {
            return `drop_${name}`
        },
        headerDropClose(name) {
            this.$set(this.sheetDropShow, name, false)
        },
        convertRuleText(type) {
            if (this.convertRule[type]) {
                return this.convertRule[type]
            } else {
                return '请先选择转化类型'
            }
        },
        itemConvert(item) {
            if (item.enable_trim > 0 || (item.convert_type !== null && item.convert_type !== undefined)) {
                return true
            } else {
                return false
            }
        },
        removeEntity(iSheet, iEntity) {

        },
        addEntity(iSheet, iEntity) {
            this.fetchStruct(this.entityData[iEntity].TABLE_NAME).then(() => {
                this.createMappingItem({
                    iEntity,
                    iSheet
                })
            })
        },
        mappingEntity(iSheet) {
            var list = []
            for (var i in this.mappingData[iSheet].entity) {
                list.push(i)
            }
            return list
        },
        mappingEntityIndex(iSheet) {
            return this.mappingData[iSheet].showEntityIndex
        },
        //当前sheet选中的entity的数值
        currentEntity(i) {
            //若开启自动建表，则直接返回建表的实体数据
            if (this.data.enable_create) {
                this.createMappingItem({
                    iSheet: i
                })
                return this.sheetEntity
            }
            if (this.mappingData[i].showEntityIndex !== null && this.mappingData[i].showEntityIndex !== undefined && this.mappingLoad) {
                return this.mappingData[i].entity[this.mappingData[i].showEntityIndex]
            } else {
                return false
            }
        }
    },
    components: {
        SelectPanel,
        SelectControl,
        RadioDataGroup,
        TabPro
    }
}
</script>

<style lang="less">
.slide-fade-enter-active {
    transition: all .3s ease;
}

.slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,
.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */

{
    transform: translateX(10px);
    opacity: 0;
}

.tab-drop-box {
    position: relative;
    >button.ivu-btn {
        border-radius: 0;
        width: 22px;
        height: 22px;
        font-size: 13px;
        margin-left: 4px;
        margin-right: -2px;
        padding-left: 1px;
        padding-top: 1px;
    }
}

.step-content .ivu-tabs.ivu-tabs-card {
    overflow: visible;
}

.header-icon {
    margin: 0;
    padding-left: 4px;
    padding-right: 4px;
}

li.add-item {
    line-height: 34px;
    &>* {

        color: #0f6ac9;
    }
}

.mapping-item {
    clear: both;
    line-height: 33px;
    .ivu-tooltip-popper {
        position: absolute !important;
    }
    .ivu-tooltip-rel,
    .ivu-tooltip {
        width: 100%;
    }
    >.ivu-col {
        padding-bottom: 8px;
    }
    .ruler-block {
        clear: both;
    }
    .mapping-type-text {
        margin-right: 10px;
        width: 46px;
        display: inline-block;
        float: right;
    }
}
</style>

